/**
    X光图仿真模拟插件
    依赖：jQuery
*/
;
$.extend({
    superimposedCarousel: function (cfg) {
        var superimposedCarouselObj = {
            //初始化
            init: function (config) {
                config = $.extend({
                    container: {},  //承载插件的容器（jQuery Dom对象），需要具有width、height值 
                    dataArr:[]     //放数据的arr
                }, config);

                var thiz = this;
                thiz.config = config;
                //初始化dom
                thiz.initDom();
                return thiz;
            },
            //初始化dom
            initDom: function () {
                var thiz = this,
                    dataArr = thiz.config.dataArr,
                    len = dataArr.length;
                var imgBox = $("<ul class='rightImgBox'></ul>");
                thiz.imgBox = imgBox;
                thiz.config.container.append(imgBox);
                if(len != 0){
                    $.each(dataArr,function(i, obj){
                        var li =  "<li><div class='pic'><img src='" + obj + "'  /></div><p>管制刀具已报警</p></li>"
                        thiz.imgBox.append(li);
                    }); 
                    thiz.carouselAndDetail();
                }
                // 轮播图动态样式
                var $carouseLi = thiz.getCarouseLi();
                // 基数
                var baseInfo = {
                    left: 20,
                    top: 16 
                };
                // 偏移量
                var offset = {
                    left: 3,
                    top: 4
                };
                    
                $carouseLi.each(function(i, obj) {
                    var $this = $(this);
                    $this.css({
                        zIndex: $carouseLi.length - (i + 1),
                        left:baseInfo.left + offset.left * i + '%',
                        top: baseInfo.top + offset.top * i + '%'
                    }).attr('data-index', i);
                });

            },
            // 获取轮播的li的dom
            getCarouseLi() {
                return this.config.container.find("li");
            },
            // 轮播和详情页
            carouselAndDetail: function () {
                var thiz = this;
				var $tabLi =$("#tabPic li");
				var tabLen = $tabLi.length;
				$tabLi.on('click', function() {
					var $this = $(this);
					var zIndex = $this.css('zIndex');
					if(tabLen > 1){
						if (zIndex == tabLen - 1) {
							//thiz.showDetail($this);
						}
						else {
							var changeIndex = thiz.getChangeIndex('next', $this);
							thiz.changeCarousel(changeIndex);
						}
					}else if(tabLen == 1){ //只有一张图时直接显示详情页
					  //  thiz.showDetail($this);    
					}
				}); 
                // 轮播图上/下张
                $(document).on('keyup', function (event) {
                    var keyCode = event.which || event.keyCode;
                    switch (keyCode) {
                        case 37:    // 左箭头
                            var changeIndex = thiz.getChangeIndex('prev');
                            thiz.changeCarousel(changeIndex);
                            break;
                        case 38:    // 上箭头
                            break;
                        case 39:    // 右箭头
                            var changeIndex = thiz.getChangeIndex('next');
                            thiz.changeCarousel(changeIndex);
                            break;
                        case 40:    // 下箭头
                            break;
                        default:
                            break;
                    }
                });
            },
            // 根据类型/dom获取changeIndex
            getChangeIndex: function (type, $this) {
                var thiz = this;
                var changeIndex = 0;
                var $courseLi = thiz.getCarouseLi();
                switch (type) {
                    case 'prev':    // 上一张
                        changeIndex = thiz.getPrev();
                        break;
                    case 'next':    // 下一张
                        changeIndex = thiz.getNext();
                        break;
                    default:
                        if ($this) {
                            var thisIndex = $this.data('index');
                            $courseLi.each(function (index, dom) {
                                var $dom = $(dom);
                                var domIndex = $dom.data('index');
                                if (thisIndex === domIndex) {
                                    changeIndex = index;
                                }
                            });
                        }
                        break;
                }
                return changeIndex;
            },
            // 切换轮播图z-index
            changeCarousel: function(changeIndex) {
                var thiz = this;

                // 轮播切换
                var $now = thiz.findNowCarousel();
                var nowIndex = $now.data('index');

                // 获取要改变的dom
                var $courseLi = thiz.getCarouseLi();
                var $change = $courseLi.eq(changeIndex);

                // 原来的值缓存
                var nowLeft = $now[0].style.left;
                var nowTop = $now[0].style.top;
                var nowZIndex = $now.css('zIndex');
                var changeLeft = $change[0].style.left;
                var changeTop = $change[0].style.top;
                var changeZIndex = $change.css('zIndex');

                // 单个宽度
                var width = $now.width();
                // 动画时间
                var speed = 600;
                $now.stop().animate({left: -.3 * width}, speed, function () {
                    $now.css({
                        zIndex: changeZIndex
                    }).animate({
                        left: changeLeft,
                        top: changeTop
                    }, speed);
                });

                $change.stop().animate({left: 1.3 * width}, speed, function () {
                    $change.css({
                        zIndex: nowZIndex
                    }).animate({
                        left: nowLeft,
                        top: nowTop
                    }, speed);
                })
            },
            // 获取上一个轮播图
            getPrev() {
                var thiz = this;
                var $now = thiz.findNowCarousel();
                var nowIndex = $now.data('index');
                var $courseLi = thiz.getCarouseLi();
                var courseLen = $courseLi.length;
                return nowIndex === 0 ? courseLen - 1 : nowIndex - 1;
            },
            // 获取下一个轮播图
            getNext() {
                var thiz = this;
                var $now = thiz.findNowCarousel();
                var nowIndex = $now.data('index');
                var $courseLi = thiz.getCarouseLi();
                var courseLen = $courseLi.length;
                return nowIndex === courseLen - 1 ? 0 : nowIndex + 1;
            },
            // 当前轮播图
            findNowCarousel: function () {
                var thiz = this;
                var $carouseLi = thiz.getCarouseLi();
                var $now;
                $carouseLi.each(function(i, obj) {
                    var $obj = $(obj);
                    var zIndex = $obj.css('zIndex');
                    if (+zIndex == $carouseLi.length - 1) {
                        $now = $obj;
                    }
                });
                return $now;
            },
            // 展示详情 此处此时用得layui 弹层
           /*  showDetail: function($this) {
				   layui.use('layer', function() {
					   $.get('./alarmMonitorDetail.html', {}, function(str) {
						$this.attr('method', 'offset');
						$this.attr('type', 'auto');
						var method = $this.attr('method');
						var type = $this.attr('type');
						layer.open({
							type: 1,
							offset: type,
							title: ['详情页'],
							id: 'tabPic' + type,    // 防止重复弹出
							content: str,
							btn: false,
							btnAlign: 'c',          // 按钮居中
							shade: 1,               // 不显示遮罩
							yes: function() {
								layer.closeAll();
							},
							area: ['1000px']
						});
					});
                });
                
            } */
        };
        return $.extend({}, superimposedCarouselObj).init(cfg);
    }
});
